<template>
  <div class="cash">
    <div class="head">
      <mt-header :title="title">
        <router-link to="/" slot="left">
          <mt-button icon="back"></mt-button>
        </router-link>
      </mt-header>
    </div>
    <div class="content">
      <div class="con">
        <ul>
          <li>
            <span>账户余额：</span>
            <span>2900.00</span>
          </li>
          <li>
            <input type="text" placeholder="请输入提现金额" class="ipt">
          </li>
          <li @click="showBox">
            <span>请选择提现方式</span>
            <!-- <span><input type="text"></span> -->
          </li>
        </ul>
      </div>
      <div class="btn">
          确定
      </div>
    </div>
    <div class="modelbox" v-show="tipbox">
        <div class="boxcon">
            <div>
                <p>支付宝（已绑定）</p>
                <p>微信（已绑定）</p>
                <p>银行卡（已绑定）</p>
            </div>
            <div class="bot" @click="hidBox">
                取消
            </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "cash",
  data() {
    return {
      title: "余额提现",
      tipbox:false
    };
  },
  methods:{
      showBox (){
          this.tipbox=true
      },
      hidBox (){
          this.tipbox=false
      }
  }
};
</script>

<style lang="less" scoped>
@family: AlibabaPuHuiTiR;
@family1: AdobeHeitiStd_regular;
.cash {
  width: 100%;
  height: 100%;
  background-color: #f8f8f8;
  font-size: 0;
  .head {
    .mint-header {
      background-color: #fff;
      color: rgb(49, 49, 49);
      font-family: AdobeHeitiStd-Regular;
      font-size: 0.3rem;
      height: 1rem;
    }
  }
  .content {
    margin-top: 0.2rem;
    width: 100%;
    .con{
        li{
            border-bottom: 1px solid #eee;
            height: 1rem;
            line-height: 1rem;
            font-family: @family;
            font-size: 0.24rem;
            color:#111;
            padding:0 0.2rem;
            box-sizing: border-box;
            .ipt{
                width: 100%;
                height: 95%;
                background-color: transparent;
                &::placeholder{
                    font-size: 0.24rem;
                   color:#111;
                }
            }

        }
    }
    .btn{
        width: 100%;
        height: 1rem;
        line-height: 1rem;
        position: absolute;
        bottom:0;
        left:0;
        background-color: red;
        color:#fff;
        text-align: center;
        font-size: 0.26rem;
        font-family: @family;
    }
  }
  .modelbox{
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.5);
      position: absolute;
      top: 0;
      left:0;
      bottom:0;
      font-family: @family;
      font-size: 0.26rem;
      .boxcon{
          position: absolute;
          bottom:0;
          left:5%;
          background-color: #fff;
        //   height: 3.4rem;
          width: 90%;
          margin:0 auto;
          border-radius: 0.15rem;
          text-align: center;
          p{
              height: 0.8rem;
              line-height: 0.8rem;
              border-bottom: 1px solid #eee;
          }
          .bot{
              height: 0.8rem;
              line-height: 0.8rem;
              margin-top:0.2rem;
          }
      }
  }
}
</style>